<template>
  <div class="app">
    <div class="content">
      <el-skeleton v-if="bookList.length==0" :rows="6" animated />
      <div v-else class="item" v-for="(item,index) in bookList" :key="index" @click="show(item)">
        <div style="padding-left: 2px">
          <el-row :gutter="10">
            <el-col :span="6">
              <img :src="item.bookImg | url" alt="" style="height: 120px;border-radius: 10px;">
            </el-col>
            <el-col :span="16">
              <div class="book-explain">
                <h3>{{item.bookName}}</h3>
                <div style="overflow:hidden;text-overflow: ellipsis;white-space: nowrap;">
                  <span>{{item.bookIntroduce}}</span>
                </div>
                <h5>{{item.bookAuthor}}·{{item.bookTotal}}万字</h5>
              </div>
            </el-col>
            <el-col :span="2">
              <div class="item-arrow">
                <i class="el-icon-arrow-right"/>

              </div>
            </el-col>
          </el-row>
        </div>
        <el-dialog
            :visible.sync="dialogCode"
            width="600px"
            :append-to-body="true"
            center>
          <BookInfoComponent :key="new Date().getTime()" :book="currentBook"/>
          <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="read()">立即阅读</el-button>
            <el-button @click="dialogCode = false">取 消</el-button>
          </span>
        </el-dialog>
      </div>
    </div>
  </div>

</template>

<script>
import BookInfoComponent from "@/components/book/BookInfoComponent";
export default {
  name: "BookListComponent",
  components: {BookInfoComponent},
  props: {bookList:Array},
  data() {
    return {
      dialogCode:false,
      currentBook:Object
    }
  }, methods: {
    read(){
      this.$router.push({name:"/ChapterPage",params:{book : this.currentBook}})
    },
    show(book){
      this.currentBook = book
      this.dialogCode = true
    },
  }, watch: {}, computed: {},filters:{
    url(value){
      return '/api'+value;
    }
  }
}
</script>


<style scoped>
.app{
  width: 100%;
}
.content{
  width: 100%;
  padding-top: 1rem;
  /*height: 600px;*/
  display: grid;
  justify-content: space-evenly;
  grid-template-columns: repeat(auto-fill, 47%);
  grid-gap: 16px;
  overflow: hidden;
}
.item{
  padding: 0.5rem;
  line-height: 1rem;
  height: 120px;
  width: 100%;
  border-radius: 5px;
}
.item:hover{
  background-color: rgba(84, 76, 76, 0.1);
  /*transform: scale(1.2);*/
}
.book-explain{
  /*float: left;*/
  text-align:left;
}
.item-arrow{
  /*justify-content: space-evenly;*/
  line-height: 120px;
  padding-right: 0.5rem;
}
</style>